<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Home</title>
    <link rel="icon" href="img/favicon.ico" type="image/x-icon">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://www.jq22.com/jquery/bootstrap-3.3.4.css">
    <link rel="stylesheet" href="https://www.jq22.com/jquery/font-awesome.4.6.0.css">
    <link href="css/animate.min.css" rel="stylesheet">
    <link href="css/aos.css" rel="stylesheet">
    <!-- main style -->
    <link href="css/style.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>

    <!-- Preloader -->
    <div id="preloader">
        <div id="status">

            <div class="preloader" aria-busy="true" aria-label="Loading, please wait." role="progressbar">
            </div>

        </div>
    </div>
    <!-- ./Preloader -->
    
    <!-- header -->
    <header class="navbar-fixed-top bg-nav">
        <nav>
            <ul>
                <li><a href="#about" style="font-size: 18px;">关于我</a></li>
                <li><a href="#experience" style="font-size: 18px;">学习经历</a></li>
                <li><a href="#projects" style="font-size: 18px;">兴趣爱好</a></li>
                <li><a href="#contact" style="font-size: 18px;">联系方式</a></li>
            </ul>
        </nav>
    </header>
    <!-- ./header -->
    
    <!-- home -->
    <div class="section" id="home" data-stellar-background-ratio="0.5">
        <div class="container">
            <div class="disply-table">
                <div class="table-cell" style="color:#fff" data-aos="fade-up" data-aos-delay="0">
                    <h4 style="position: relative; top: 150px;color:#fff">Wen tian yuan</h4>
                    <h1 style="position: relative; top: 150px;">Welcome!</h1> </div>
            </div>
        </div>
    </div>
    <!-- ./home -->
    
    <!-- about -->
    <div class="section" id="about">
        <div class="container">
            <div class="col-md-6" data-aos="fade-up">
                <h1 class="size-50"> 关于我</h1>
                <div class="h-50"></div>
                <p>我是温添圆，来自山东省泰安市。</p>
                <p>兴趣爱好广泛!喜欢听歌，旅游，拍照etc</p>
                <p>Anyway,喜欢一切新奇的事物!</p>
                <br/>
                <br/>
                
                <p><strong>相信未来</strong></p>
                <p>当蜘蛛无情地网查封了我的炉台，</p>
                <p>当灰烬地余烟叹息着我的悲哀，</p>
                <p>我依然固执地铺平失望地灰烬，</p>
                <p>用美丽的雪花写下：相信未来！</p>
                <div class="h-50"></div> <img src="img/Signature.svg" width="230" alt="" />
                <div class="h-50"></div>
            </div>
            <div class="col-md-6 about-img-div">
                <div class="about-border" data-aos="fade-up" data-aos-delay=".5"></div>
                <img src="img/about-img.jpg" width="400" class="img-responsive" alt="" align="right" data-aos="fade-right" data-aos-delay="0" />
            </div>
        </div>
    </div>
    <!-- ./about -->
    
    <!-- experience  -->
    <div class="section" id="experience">
        <div class="container">
            <div class="col-md-12">
              
                <h1 class="size-50">我的学习经历</h1>
                <div class="h-50"></div>
            </div>
            <div class="col-md-12">
                <ul class="timeline">
                    <li class="timeline-event" data-aos="fade-up">
                        <label class="timeline-event-icon"></label>
                        <div class="timeline-event-copy">
                            <p class="timeline-event-thumbnail">2013 -2017</p>
                            <h3>宁阳一中</h3>
                            <h4>数理化</h4>
                            <p>Studying</p>
                         </div>
                    </li>
                    <li class="timeline-event" data-aos="fade-up" data-aos-delay=".2">
                        <label class="timeline-event-icon"></label>
                        <div class="timeline-event-copy">
                            <p class="timeline-event-thumbnail">2017 - 2020</p>
                            <h3>山东商业职业技术学院</h3>
                            <h4>软件技术专业</h4>
                            <p>good good study! Day day up!</p>
                        </div>
                    </li>
                    <li class="timeline-event" data-aos="fade-up" data-aos-delay=".4">
                        <label class="timeline-event-icon"></label>
                        <div class="timeline-event-copy">
                            <p class="timeline-event-thumbnail">2020 - now</p>
                            <h3>临沂大学</h3>
                            <h4>计算机科学与应用专业</h4>
                            <p><strong>For the future</strong>
                                <br></p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- ./experience -->
    <!-- projects -->
    <div class="section" id="projects">
        <div class="container">
            <div class="col-md-12">
               
                <h1 class="size-50">我的兴趣爱好</h1> 
            </div>
            <!-- main container -->
            <div class="main-container portfolio-inner clearfix">
                <!-- portfolio div -->
                <div class="portfolio-div">
                    <div class="portfolio">
                        <!-- portfolio_filter -->
                        <div class="categories-grid wow fadeInLeft">
                            <nav class="categories">
                                <ul class="portfolio_filter">
                                    <li><a href="" class="active" data-filter="*" style="font-size: 18px;">All</a></li>
                                    <li><a href="" data-filter=".photography" style="font-size: 18px;">美食</a></li>
                                    <li><a href="" data-filter=".logo" style="font-size: 18px;">音乐</a></li>
                                    <li><a href="" data-filter=".graphics" style="font-size: 18px;">电影</a></li>
                                    <li><a href="" data-filter=".ads" style="font-size: 18px;">猫咪</a></li>
                                    <li><a href="" data-filter=".fashion" style="font-size: 18px;">龙~</a></li>
                                </ul>
                            </nav>
                        </div>
                        <!-- portfolio_filter -->
                        
                        <!-- portfolio_container -->
                        <div class="no-padding portfolio_container clearfix" data-aos="fade-up">
                            <!-- single work -->
                            <div class="col-md-4 col-sm-6  fashion">
                                <a id="demo01"  class="portfolio_item"> <img src="img/gd.jpg" alt="image" class="img-responsive" />
                                    <div class="portfolio_item_hover">
                                        <div class="portfolio-border clearfix">
                                            <div class="item_info"> <span>G-drangon</span> <em>is a supper idol!</em> </div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div class="col-md-4 col-sm-6  logo">
                                <a id="demo01"  class="portfolio_item"> <img src="img/music1.jpg" alt="image" class="img-responsive" />
                                    <div class="portfolio_item_hover">
                                        <div class="portfolio-border clearfix">
                                            <div class="item_info"> <span>Closer</span> <em>We ain't ever getting older</em> </div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <!-- end single work -->
                            
                            <!-- single work -->
                            <div class="col-md-4 col-sm-6  graphics">
                                <a id="demo02"  class="portfolio_item"> <img src="img/movie.jpg" alt="image" class="img-responsive" />
                                    <div class="portfolio_item_hover">
                                        <div class="portfolio-border clearfix">
                                            <div class="item_info"> <span>哈利波特</span><em>It does not do to dwell on dreams and forget to live.</em> </div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <!-- end single work -->
                            
                            <!-- single work -->
                            <div class="col-md-4 col-sm-6 photography">
                                <a id="demo03"  class="portfolio_item"> <img src="img/food1.jpg" alt="image" class="img-responsive" />
                                    <div class="portfolio_item_hover">
                                        <div class="portfolio-border clearfix">
                                            <div class="item_info"> <span>意大利面</span> <em>吸溜一口</em> </div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <!-- end single work -->
                            
                            <!-- single work -->
                            <div class="col-md-4 col-sm-6 ads">
                                <a id="demo04"  class="portfolio_item"> <img src="img/cat.jpg" alt="image" class="img-responsive" />
                                    <div class="portfolio_item_hover">
                                        <div class="portfolio-border clearfix">
                                            <div class="item_info"> <span>喵</span> <em>这小东西真它喵的可爱</em> </div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <!-- single work -->
                            <div class="col-md-4 col-sm-6 logo">
                                <a id="demo04"  class="portfolio_item"> <img src="img/music2.jpg" alt="image" class="img-responsive" />
                                    <div class="portfolio_item_hover">
                                        <div class="portfolio-border clearfix">
                                            <div class="item_info"> <span>无题</span> <em>so fanstic</em> </div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <!-- single work -->
                            <div class="col-md-4 col-sm-6 photography">
                                <a id="demo04"  class="portfolio_item"> <img src="img/food2.jpg" alt="image" class="img-responsive" />
                                    <div class="portfolio_item_hover">
                                        <div class="portfolio-border clearfix">
                                            <div class="item_info"> <span>甜点</span> <em>is so sweet</em> </div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <!-- end single work -->
                            
                            <!-- single work -->
                        
                            <!-- end single work -->
                        </div>
                        <!-- end portfolio_container -->
                    </div>
                    <!-- portfolio -->
                </div>
                <!-- end portfolio div -->
            </div>
            <!-- end main container -->
        </div>
    </div>
    <!-- ./projects -->
    
    <!-- contact -->
    <div class="section" id="contact">
        <div class="container">
            <div class="col-md-12">
               
                <h1 class="size-50">我的联系方式</h1>
                <div class="h-50"></div>
            </div>
            <div class="col-md-4">

                <h3>手机号</h3>
                <p>121 6548 8952</p>
                <h3>邮箱</h3>
                <p>beautiful@is.me </p>


                <ul class="social">
                    <li><a href="#"><i class="fa fa-weixin"></i></a></li>
                    <li><a href="#"><i class="fa fa-qq"></i></a></li>
                    <li><a href="#"><i class="fa fa-weibo"></i></a></li>
                    
                </ul>
                <div class="clearfix"></div>
                this is my web side
                <div class="h-50"></div>
            </div>
            <!-- <div class="col-md-8">
                <form class="contact-bg" id="contact-form" name="contact" method="post" novalidate>
                    <input type="text" name="name" class="form-control" placeholder="Your Name" />
                    <input type="email" name="email" class="form-control" placeholder="Your E-mail" />
                    <input type="text" name="phone" class="form-control" placeholder="Phone Number" />
                    <textarea name="message" class="form-control" placeholder="Your Message" style="height:120px"></textarea>
                    <button id="submit" type="submit" name="submit" class="btn btn-glance">Send</button>
                    <div id="success">
                        <p class="green textcenter"> Your message was sent successfully! I will be in touch as soon as I can. </p>
                    </div>
                    <div id="error">
                        <p> Something went wrong, try refreshing and submitting the form again. </p>
                    </div>
                </form>
            </div> -->
        </div>
    </div>
    <!-- ./contact -->

    <!--DEMO01-->
    <!-- <div id="animatedModal" class="popup-modal">
        
        <div id="btn-close-modal" class="close-animatedModal close-popup-modal"> <i class="ion-close-round"></i> </div>
        <div class="clearfix"></div>
        <div class="modal-content">
            <div class="container">
                <div class="portfolio-padding">
                    <div class="col-md-8 col-md-offset-2">
                        <h2>Geschäfts Eines<br /> Web-Studios</h2>
                        <div class="h-50"></div>
                        <p>Appropriately maintain standards compliant total linkage with cutting-edge action items. Enthusiastically create seamless synergy rather than excellent value. Quickly promote premium strategic theme areas vis-a-vis.</p>
                        <p>Appropriately maintain standards compliant total linkage with cutting-edge action items. Enthusiastically create seamless synergy rather than excellent value.</p>
                        <br />
                        <br /> <img src="img/portfolio/02.jpg" alt="" class="img-responsive" />
                        <br />
                        <br />
                        <p>Appropriately maintain standards compliant total linkage with cutting-edge action items. Enthusiastically create seamless synergy rather than excellent value. Quickly promote premium strategic theme areas vis-a-vis.</p>
                        <p>Appropriately maintain standards compliant total linkage with cutting-edge action items. Enthusiastically create seamless synergy rather than excellent value.</p>
                        <br />
                        <br /> </div>
                </div>
            </div>
        </div>
    </div> -->
    <!-- jQuery -->
    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <!--  plugins  -->
    <script src="https://www.jq22.com/jquery/bootstrap-3.3.4.js"></script>
    <script src="js/plugins.js"></script>
    <script src="js/aos.js"></script>

    <script src="js/jquery.validate.min.js"></script>

    <!--  main script  -->
    <script src="js/custom.js"></script>
</body>

</html>